<template>
  <detail-frame :title="title" show-finish-state>
    <detail-block title="基本信息">
      <el-form inline :label-width="120" label-suffix=":">
        <el-form-item class="form-item" label="创建人">
          {{ detail?.cuser }}
        </el-form-item>
        <el-form-item class="form-item" label="创建时间">
          {{ detail?.ctime }}
        </el-form-item>
        <el-form-item class="form-item" label="维修单号">
          {{ detail?.orderNumber }}
        </el-form-item>
        <el-form-item class="form-item" label="工单状态">
          {{ detail?.orderStatusName }}
        </el-form-item>
        <el-form-item class="form-item" label="客户名称">
          {{ detail?.customerName }}
        </el-form-item>
        <el-form-item class="form-item" label="站点名称">
          {{ detail?.siteName }}
        </el-form-item>
        <el-form-item class="form-item" label="联系人">
          {{ detail?.contactor }}
        </el-form-item>
        <el-form-item class="form-item" label="联系电话">
          {{ detail?.telephone }}
        </el-form-item>
        <el-form-item class="form-item-line" label="联系地址">
          {{ detail?.address }}
        </el-form-item>
        <el-form-item class="form-item" label="接收快递日期">
          {{ detail?.receiveDate.replace("00:00:00", "") }}
        </el-form-item>
        <el-form-item class="form-item" label="接收快递单号">
          {{ detail?.receiveNumber }}
        </el-form-item>
        <el-form-item class="form-item" label="产品型号">
          {{ product?.productName }}
        </el-form-item>
        <el-form-item class="form-item" label="产品SN">
          {{ product?.productSn }}
        </el-form-item>
        <el-form-item class="form-item" label="维修次数">
          {{ product?.repairCount }}
        </el-form-item>
        <el-form-item class="form-item-line" label="备注">
          {{ product?.comment }}
        </el-form-item>
      </el-form>
    </detail-block>
    <detail-block title="产品检测">
      <template #buttons>
        <el-button v-if="canEdit" @click="onProductCheck" v-auth="'UpdateProductCheck'" circle icon="Edit"
          type="primary"></el-button>
        <update-product-check-view :visible="productCheckVisible" :order-id="orderId" :product-sn="sn"
          :product-code="product?.productCode || ''" @close="onProductCheckClosed"></update-product-check-view>
      </template>
      <el-form inline :label-width="120" label-suffix=":">
        <el-form-item class="form-item" label="检测工程师">
          {{ productCheck?.cuser || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="检测时间">
          {{ productCheck?.ctime || "" }}
        </el-form-item>
        <el-form-item class="form-item-line" label="客户故障描述">
          <el-input readonly type="textarea" :model-value="(productCheck?.question || '')" :rows="4"></el-input>
        </el-form-item>
        <el-form-item class="form-item-line" label="检测故障">
          <el-input readonly type="textarea" :model-value="(productCheck?.questionCheck || '')" :rows="4"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="质保状态">
          {{ productCheck?.warranty || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="维修站点">
          {{ productCheck?.repairSite || "" }}
        </el-form-item>
        <el-form-item class="form-item-line" label="工时费">
          {{ productCheck?.workHourPrice || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="是否报价">
          {{ !productCheck ? "" : (productCheck.quoteState || "否") }}
        </el-form-item>
        <el-form-item class="form-item" label="报价日期">
          {{ DateUtil.resolve(productCheck?.quoteDate, true) }}
        </el-form-item>
        <el-form-item class="form-item" label="报价是否确认">
          {{ !productCheck ? "" : (productCheck.isQuoteConfirm === true ? "是" : "否") }}
        </el-form-item>
        <el-form-item class="form-item" label="报价确认日期">
          {{ DateUtil.resolve(productCheck?.quoteConfirmDate, true) }}
        </el-form-item>
        <el-form-item class="form-item" label="上传图片">
          <image-gallary :readonly="true" :image-ids="fileIds"></image-gallary>
        </el-form-item>
      </el-form>
      <detail-list-frame :show-summary="true" :summary-columns="['count', 'totalPrice']" title="产品配件清单" inner-control
        :columns="columns" :table-data="productCheckPartList" :total="productCheckPartList.length"
        :show-operations="false"></detail-list-frame>
    </detail-block>
    <detail-block title="产品维修">
      <template #buttons>
        <el-button @click="onProductRepair" v-if="canEdit" v-auth="'UpdateProductRepair'" circle icon="Edit"
          type="primary"></el-button>
        <update-product-repair-view :visible="productRepairVisible" :order-id="orderId" :product-sn="sn"
          :product-code="product?.productCode || ''" @close="onProductRepairClosed"></update-product-repair-view>
      </template>
      <el-form inline :label-width="120" label-suffix=":">
        <el-form-item class="form-item" label="维修工程师">
          {{ productRepair?.cuser || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="最近提交时间">
          {{ productRepair?.utime || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="维修状态">
          {{ productRepair?.repairState || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="是否支付">
          {{ productRepair?.payState || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="付款日期">
          {{ productRepair?.payDate.replace("00:00:00", "") || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="付款方式">
          {{ productRepair?.payType || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="是否开票">
          {{ productRepair && (productRepair.isInvoice === true ? "是" : "否") || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="发票类型">
          {{ productRepair?.invoiceType || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="发票号码">
          {{ productRepair?.invoiceNumber || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="开票日期">
          {{ productRepair?.invoiceDate.replace("00:00:00", "") || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="返回快递日期">
          {{ productRepair?.returnDate.replace("00:00:00", "") || "" }}
        </el-form-item>
        <el-form-item class="form-item" label="返回快递单号">
          {{ productRepair?.returnNumber || "" }}
        </el-form-item>
      </el-form>
    </detail-block>
  </detail-frame>
</template>
<script lang="ts" setup>
import DetailFrame from '@/components/DetailFrame/DetailFrame.vue';
import DetailListFrame from '@/components/DetailFrame/DetailListFrame.vue';
import DetailBlock from '@/components/DetailFrame/DetailBlock.vue';
import ImageGallary from '@/components/Form/ImageGallary.vue';
import UpdateProductCheckView from './UpdateProductCheckView.vue';
import UpdateProductRepairView from './UpdateProductRepairView.vue';
import { type OrderProductDTO, type OrderProductCheckDTO, type OrderProductCheckPriceDTO, type OrderProductRepairDTO, OrderStatusEnum, type OrderDTO } from '@/server/afterSale/types';
import ApiTree from '@/server/api-tree';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { type ColumnType } from '@/components/types';
import DateUtil from '@/plugins/date';
import emits, { EventEnum } from '@/plugins/emits';
import type { UserVO } from '@/server/user/types';
import StoreManager from '@/plugins/storage';


const route = useRoute()
const orderId = route.params.orderId.toString();
const sn = route.query.sn?.toString() || "";
const title = ref<string>("");
/** 获取产品明细 */
const columns = ref<ColumnType[]>([
  { prop: "productPartName", colName: "配件名称", width: 0 },
  { prop: "price", colName: "单价", width: 0 },
  { prop: "count", colName: "数量", width: 0 },
  { prop: "totalPrice", colName: "合计", width: 0 },
])
const fileIds = ref<string[]>([])
const detail = ref<OrderDTO>();
const product = ref<OrderProductDTO>();
const productCheck = ref<OrderProductCheckDTO>();
const productCheckPartList = ref<OrderProductCheckPriceDTO[]>([]);
const productRepair = ref<OrderProductRepairDTO>();
const canEdit = ref(true);

const getBaseInfo = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.getBaseInfo(orderId);
  if (success) {
    title.value = `售后工单产品详情【${sn}】`;
    detail.value = data;
  }
}
const user = ref<UserVO | null>(StoreManager.get<UserVO>("user"));
const getProductDetail = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.getProductDetail(orderId, sn);
  if (success) {
    product.value = data;
    // 订单已提交、处理中，且产品维修状态不是已完成，的情况下可以编辑
    const isAdmin = user.value?.role === "ADMIN";
    canEdit.value = isAdmin || [OrderStatusEnum.SUBMITTED, OrderStatusEnum.PROCESSING].includes(detail.value?.orderStatus || "")
      && product.value?.repairStateCode !== "REPAIRED";
  }
}
const getCheckDetail = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.getCheckDetail(orderId, sn);
  if (success) {
    productCheck.value = data.check;
    fileIds.value = data.fileIds;
    productCheckPartList.value = data.prices;
  }
}
const getRepairDetail = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.getRepairDetail(orderId, sn);
  if (success && data) {
    productRepair.value = {
      ...data,
      payDate: DateUtil.resolve(data.payDate, true),
      invoiceDate: DateUtil.resolve(data.invoiceDate, true),
      returnDate: DateUtil.resolve(data.returnDate, true)
    };
  }
}
/** 维护产品检测 */
const productCheckVisible = ref(false)
const onProductCheck = () => {
  productCheckVisible.value = true;
}
const onProductCheckClosed = () => {
  productCheckVisible.value = false;
  getProductDetail();
  getCheckDetail();
  emits.triggerOwner(EventEnum.DETAIL_RELOAD, orderId);
}
/** 维护产品维修 */
const productRepairVisible = ref(false);
const onProductRepair = () => {
  productRepairVisible.value = true;
}
const onProductRepairClosed = () => {
  productRepairVisible.value = false;
  getProductDetail();
  getRepairDetail();
  emits.triggerOwner(EventEnum.DETAIL_RELOAD, orderId);
}
onMounted(async () => {
  if (!orderId && !sn) {
    ElMessage.error("缺少关键参数");
    setTimeout(() => {
      window.close();
    }, 300);
    return;
  }
  await getBaseInfo();
  await getProductDetail();
  getCheckDetail();
  getRepairDetail();
})
</script>
<style lang="scss" scope></style>
